<template>
	<div>
	  <div class="header">
	  	<p><b>如何获得芸券？</b></p>
	  	<p>获得芸券的<spna style='color: #f4d800;font-size: 1.3rem;'>6</spna>种途径</p>
	  </div>
	  <div class="content">
	  	<div class="xian"></div>
	  	<div class="content1">
	  		<div class="getcouponHeader"><b>01 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注册即可获得666芸券呦~</b></div>
	  		<div class="getcouponContent">
	  			<div class="getcouponContent1"></div>
	  			<div class="getcouponContent2">微信搜索“<b>芸券公众号</b>”加关注<br/>即可获得666芸券!</b></div>
	  		</div>
	  	</div>
	  	<div class="content2">
	  		<div class="getcouponHeader"><b>02 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;玩挖宝游戏，赢芸券!</b></div>
	  		<div class="getcouponContent">
	  			<div class="getcouponContent1">
	  				打开“芸券公众号”<br/>点击屏幕右下方“<b>铲子</b>”<br/>进入游戏挖宝页面
	  			</div>
	  			<div class="getcouponContent2"></div>
	  			<div class="getcouponContent3">
	  				玩“<b>挖宝游戏</b>”即可<br/>获得芸券，多玩多得呦!
	  			</div>
	  		</div>
	  	</div>
	  	<div class="content3">
	  		<div class="getcouponHeader"><b>03 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;出售电子券可获得芸券呦!</b></div>
	  		<div class="getcouponContent">
	  			<div class="getcouponContent1">
	  				打开“芸券公众号”<br/>在“<b>我的</b>”页面点击<b>商券</b><br/>进入券列表
	  			</div>
	  			<div class="getcouponContent2"></div>
	  			<div class="getcouponContent3">
	  				选择需要出售的券<br/>点击“<b>兑换芸券</b>”<br/>出售成功即可获得芸券!
	  			</div>
	  		</div>
	  	</div>
	  	<div class="content4">
	  		<div class="getcouponHeader"><b>04 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;邀请好友可获得100芸券啦!</b></div>
	  		<div class="getcouponContent">
	  			<div class="getcouponContent1">
	  				打开“芸券公众号”点击<br/><b>邀请好友轮播图</b>或在“我的”<br/>页面点击<b>邀请分享</b>
	  			</div>
	  			<div class="getcouponContent2"></div>
	  			<div class="getcouponContent3">
	  				分享给好友，关注后<br/>可获得100芸券
	  			</div>
	  		</div>
	  	</div>
	  	<div class="content5">
	  		<div class="getcouponHeader"><b>05 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;买单可得10芸券啦!</b></div>
	  		<div class="getcouponContent">
	  			<div class="getcouponContent1">
	  				打开微信或“芸券公众号”<br/>的<b>扫一扫</b>，功能
	  			</div>
	  			<div class="getcouponContent2"></div>
	  			<div class="getcouponContent3">
	  				扫描“<b>商家二维码</b>”完成买单<br/>即可获得10芸券
	  			</div>
	  		</div>
	  	</div>
	  	<div class="content6">
	  		<div class="getcouponHeader"><b>06 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;评论可得5芸券呦~</b></div>
	  		<div class="getcouponContent">
	  			<div class="getcouponContent1">
	  				打开“芸券公众号”<br/>进入“<b>我的</b>”页面
	  			</div>
	  			<div class="getcouponContent2"></div>
	  			<div class="getcouponContent3">
	  				点击“<b>我的订单</b>”进行评价<br/>即可获得5芸券
	  			</div>
	  		</div>
	  	</div>
	  </div>
	</div>
</template>

<script>
	export default{
		created:function(){
			this.$emit('header-info', {
		      title: '如何获得芸券',
		      isBack: true,
		      isMessage: false
		    })
		}
	}
</script>

<style scoped="scoped">
.header{
	width: 100%;
	height: 11rem;
	background: url(../../images/getcouponHeader.png) no-repeat left top;
	background-size:cover ;
	text-align: center;
}
.xian{
	position: absolute;
	width: .2rem;
	height: 87rem;
	margin-left: 1rem;
	z-index: -1;
	background:url(../../images/getcouponXian.png) repeat-y;
}
.header p:nth-of-type(1){
	width: 100%;
	height: 3rem;
	line-height: 3rem;
	position: absolute;
	top: 8rem;
	color: #fff;
	font-size: 1.6rem;
}
.header p:nth-of-type(2){
	width: 100%;
	height: 3rem;
	line-height: 3rem;
	position: absolute;
	top: 10rem;
	color: #fff;
	
}
.content{
	width: 100%;
	padding: 1rem;
}
.getcouponHeader{
	color: #7741d7;
	font-size: 1rem;
	width: 100%;
	height: 4rem;
	background: url(../../images/getcouponHeader1.png) no-repeat left top;
	background-size: cover;
	line-height: 4rem;
	text-indent: 1rem;
}
.getcouponContent{
	width: 100%;
	height: 8rem;
	/*background: darkcyan;*/
	margin-left: 1rem;
	margin-top: 1rem;
}
.content1 .getcouponContent .getcouponContent1{
	width: 7rem;
	float: left;
	height: 8rem;
	background: url(../../images/getcoupon.png) 0rem 0rem;
	background-size:cover ;
}
.content1 .getcouponContent .getcouponContent2{
	/*width: 16rem;*/
	float: right;
	height: 8rem;
	/*margin-right: 1rem;*/
	line-height: 3rem;
	text-align: center;
	padding-right: 2rem;
}
.content2,.content3,.content4,.content5,.content6{
	height: 16rem;
	margin: 1rem 0;
}
.content2 .getcouponContent .getcouponContent1{
	text-align: center;
	width: 9rem;
	float: left;
	height: 8rem;
	background: url(../../images/getcoupon.png) no-repeat -9rem 0rem;
	background-size:cover ;
	padding-top: 8rem;
}
.content2 .getcouponContent .getcouponContent2{
	float: left;
	width: 4rem;
	height: 2rem;
	background: url(../../images/getcouponJiantou.png) no-repeat left top;
	background-size:cover ;
	margin:2rem 0 0 ;
}
.content2 .getcouponContent .getcouponContent3{
	float: left;
	width: 9rem;
	height: 8rem;
	background: url(../../images/getcoupon.png) no-repeat -20rem 0;
	background-size:cover ;
	padding-top: 8rem;
	text-align: center;
}
.content3 .getcouponContent .getcouponContent1{
	text-align: center;
	width: 9rem;
	float: left;
	height: 8rem;
	background: url(../../images/getcoupon.png) no-repeat -31rem 0rem;
	background-size:cover ;
	padding-top: 8rem;
}
.content3 .getcouponContent .getcouponContent2{
	float: left;
	width: 4rem;
	height: 2rem;
	background: url(../../images/getcouponJiantou.png) no-repeat left top;
	background-size:cover ;
	margin:2rem 0 0 ;
}
.content3 .getcouponContent .getcouponContent3{
	float: left;
	width: 9rem;
	height: 8rem;
	background: url(../../images/getcoupon.png) no-repeat -43rem 0;
	background-size:cover ;
	padding-top: 8rem;
	text-align: center;
}
.content4 .getcouponContent .getcouponContent1{
	text-align: center;
	width: 13rem;
	float: left;
	height: 6rem;
	background: url(../../images/getcoupon.png) no-repeat -55rem 0rem;
	background-size:cover ;
	padding-top: 8rem;
}
.content4 .getcouponContent .getcouponContent2{
	float: left;
	width: 2rem;
	height: 1rem;
	background: url(../../images/getcouponJiantou.png) no-repeat left top;
	background-size:cover ;
	margin:2rem 0 0 ;
}
.content4 .getcouponContent .getcouponContent3{
	float: left;
	width: 9rem;
	height: 8rem;
	background: url(../../images/getcoupon.png) no-repeat -74rem 0;
	background-size:cover ;
	padding-top: 8rem;
	text-align: center;
	position: relative;
	top: 0rem;
	left: .5rem;
}
.content5 .getcouponContent .getcouponContent1{
	text-align: center;
	width: 9rem;
	float: left;
	height: 8rem;
	background: url(../../images/getcoupon.png) no-repeat -87rem 0rem;
	background-size:cover ;
	padding-top: 8rem;
}
.content5 .getcouponContent .getcouponContent2{
	float: left;
	width: 4rem;
	height: 2rem;
	background: url(../../images/getcouponJiantou.png) no-repeat left top;
	background-size:cover ;
	margin:2rem 0 0 ;
}
.content5 .getcouponContent .getcouponContent3{
	float: left;
	width: 9rem;
	height: 8rem;
	background: url(../../images/getcoupon.png) no-repeat -101rem 0;
	background-size:cover ;
	padding-top: 8rem;
	text-align: center;
}
.content6 .getcouponContent .getcouponContent1{
	text-align: center;
	width: 9rem;
	float: left;
	height: 8rem;
	background: url(../../images/getcoupon.png) no-repeat -114rem 0rem;
	background-size:cover ;
	padding-top: 8rem;
}
.content6 .getcouponContent .getcouponContent2{
	float: left;
	width: 4rem;
	height: 2rem;
	background: url(../../images/getcouponJiantou.png) no-repeat left top;
	background-size:cover ;
	margin:2rem 0 0 ;
}
.content6 .getcouponContent .getcouponContent3{
	float: left;
	width: 9rem;
	height: 8rem;
	background: url(../../images/getcoupon.png) no-repeat -130rem 0;
	background-size:cover ;
	padding-top: 8rem;
	text-align: center;
}
.content2,.content4,.content6{
	margin: 2rem 0;
}
</style>